﻿@using ZBJF.Warranty.BLL
@using ZBJF.Warranty.Common.Common
@using ZBJF.Warranty.Common.Enums.InsuranceProducts
@using ZBJF.Warranty.Model
@model SellerInsuranceProducts
@{
    ViewBag.Title = "产品详情";
    var currentUser = CurrentLoginUser.CurrentUser;
    var sellerId = currentUser != null ? CurrentLoginUser.CurrentUser.SellerId : long.Parse(Request["SellerId"] ?? "0");
    var sellerEmployeeID = currentUser != null ? CurrentLoginUser.CurrentUser.ID : long.Parse(Request["SellerEmployeeID"] ?? "0");
    if (sellerId <= 0 || sellerEmployeeID <= 0)//未登录
    {
        Response.Redirect("/home");
    }
    var saleQty = ServiceFactory.InsuranceProductOrderServiceInstance.GetSellerInsuranceProductSaleCount(string.Empty, sellerEmployeeID, Model.ID, InsuranceProductOrderStatus.Paid);
    var shareUrl = "http://" + Request.Url.Authority + "/InsuranceProduct/BuyProduct?id=" + Model.ID + "&SellerId=" + sellerId + "&SellerEmployeeID=" + sellerEmployeeID;
}
<script src="~/Scripts/jquery-ui.js"></script>
<link href="~/Content/jquery-ui.css" rel="stylesheet" />

<div class="desc_forward_title" onclick="history.back(-1)">
    产品详情
</div>
<div class="product_top_header">
    <div class="product_top_title">
        <div class="left">
            <hr>
        </div>
        <div class="text">@Model.ProductName</div>
        <div class="right">
            <hr>
        </div>
    </div>
    <div class="price"><label>￥</label>@Model.SaleRetailPrice</div>
    <div class="sale-count">销量 @saleQty&nbsp;份</div>
</div>
<div class="weui-tab">
    <div class="weui-navbar">
        @if (currentUser != null)
        {
            <a class="weui-navbar__item  weui-bar__item--on" href="#tab2">
                产品介绍
            </a>
            <a class="weui-navbar__item" href="#tab1">
                扫码购买
            </a>
        }
        else
        {
            <div class="product_buy_title">
                <a class="align-left" href="#tab2">
                    产品介绍
                </a>
            </div>
        }
    </div>
    <div class="weui-tab__bd">
        @if (currentUser != null)
        {
            <div id="tab1" class="weui-tab__bd-item">
                <div class="align-center">
                    <div id="qrcode" class="qrcode" onclick="createQrCode()"></div>
                </div>
                <div class="weui-loadmore weui-loadmore_line weui-loadmore_dot">
                    <span class="weui-loadmore__tips">立即分享,快速成交</span>
                </div>
            </div>
        }
        <div id="tab2" class="weui-tab__bd-item weui-tab__bd-item--active">
            <div class="weui-form-preview">
                <div class="detail_content">
                    @Html.Raw(Model.Intro)
                </div>
                <div class="weui-form-preview__ft weui-footer_fixed-bottom">
                    <a class="weui-form-preview__btn weui-form-preview__btn_primary" id="buybtn" href="javascript:void(0)" onclick="showBuyInsuranceProductModel()">立即购买</a>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="hidden" id="insuranceCardDialog">
    @using (Html.BeginForm("CreateOrder", "InsuranceProductOrder", FormMethod.Post, new { id = "insuranceCard", @class = "create-order-form" }))
    {
        <div class="weui-cells weui-cells_form">
            @Html.AntiForgeryToken()
            @Html.Hidden("ID")
            @Html.Hidden("IdentityCardLimitQty")
            @Html.Hidden("SellerID", sellerId)
            @Html.Hidden("SellerEmployeeID", sellerEmployeeID)
            <div class="weui-cell">
                姓名：
                <div class="weui-cell__bd weui-cell_primary">
                    @Html.TextBox("BuyUserName", "", new { validate = "{required:true,messages:{required:'请输入姓名'}}", @class = "weui-input", placeholder = "请输入姓名" })
                </div>
            </div>
            <div class="weui-cell">
                身份证号：
                <div class="weui-cell__bd weui-cell_primary">
                    @Html.TextBox("BuyUserIDNo", "", new { validate = "{required:true,isIdCardNo:true,messages:{required:'请输入身份证号码',isIdCardNo:'请输入正确的身份证号码'}}", @class = "weui-input", placeholder = "请输入身份证号" })
                </div>
            </div>
            <div class="weui-cell">
                联系电话：
                <div class="weui-cell__bd weui-cell_primary">
                    @Html.TextBox("BuyUserPhone", "", new { validate = "{required:true,isTelphone:true,messages:{required:'请输入联系电话',isTelphone:'请输入正确的电话号码'}}", @class = "weui-input", placeholder = "请如实输入，用以接受卡密" })
                </div>
            </div>
            <div class="weui-cell">
                电子邮箱：
                <div class="weui-cell__bd weui-cell_primary">
                    @Html.TextBox("BuyUserEmail", "", new { validate = "{required:true,isEmail:true,messages:{required:'请输入身份证号码',isEmail:'请输入正确email'}}", @class = "weui-input", placeholder = "请如实输入，用以接受卡密" })
                </div>
            </div>
            <div class="weui-cell">
                购买数量：
                <div class="weui-cell__bd weui-cell_primary align-right">
                    <div class="weui-count">
                        <a class="weui-count__btn weui-count__decrease"></a>
                        <input class="weui-count__number" type="number" id="BuyCount" onfocus="this.blur();" name="BuyCount" value="1">
                        <a class="weui-count__btn weui-count__increase"></a>
                    </div>
                </div>
            </div>
            <div class="pay_type_title">请选择支付方式</div>
            <div class="pay_type">
                @Html.Hidden("PayType", (byte)InsuranceProductOrderPayType.WeiXinPay)
                <div class="pay_type_pic">
                    <img src="/Images/pay_type_1.png" />
                </div>
                <div class="pay_type_desc">
                    <label style="padding-left: 5px;">微信支付</label><br />
                    <label style="font-size: 14px;color:gray">微信安全支付</label>
                </div>
                <div class="pay_type_select_pic">
                    <img src="/Images/selected.png" id="selectPayType" class="" onclick="changePayType()" />
                </div>
            </div>
            <div class="weui-cell settle_accounts">
                <div class="total_price">
                    <label>合计: ￥</label> <label id="TotalPrice" name="TotalPrice">@Model.SaleRetailPrice</label>
                </div>
                <input type="submit" class="weui-btn weui-btn_mini weui-btn_primary" value="去结算">
            </div>
            <script type="text/javascript">
                var dialog;



                //选中支付方式
                function changePayType() {
                    if ($("#selectPayType").attr("src") == "/Images/unselect.png") {
                        $("img[id=selectPayType]").attr("src", "/Images/selected.png");
                    } else {
                        $("img[id=selectPayType]").attr("src", "/Images/unselect.png");
                    }
                }

                //增减数量
                $(function() {
                    $("form[id=insuranceCard]").submit(function() {
                        var validateMsg = "";
                        var buyUserName = $(this).find("input[id=BuyUserName]").val();
                        var buyUserIDNo = $(this).find("input[id=BuyUserIDNo]").val();
                        var buyUserPhone = $(this).find("input[id=BuyUserPhone]").val();
                        var buyUserEmail = $(this).find("input[id=BuyUserEmail]").val();
                        var buyCount = $(this).find("input[id=BuyCount]").val();
                        if (buyCount < 1) {
                            layer.msg("购买的数量不能小于1", { icon: 0 });
                        } else if (buyCount > 20) {
                            layer.msg("最大购买数量不能超过20", { icon: 0 });
                        }
                        if (buyUserName == "") {
                            validateMsg += "请输入姓名！<br/>";
                        }
                        if (!isIdCardNo(buyUserIDNo)) {
                            validateMsg += "请输入正确的身份证号码！<br/>";
                        }
                        if (!isTelphone(buyUserPhone)) {
                            validateMsg += "请输入正确的手机号码！<br/>";
                        }
                        if (!isEmail(buyUserEmail)) {
                            validateMsg += "请输入正确的Email！<br/>";
                        }
                        if (validateMsg != "") {
                            layer.msg(validateMsg, { icon: 0 });
                            return false;
                        }
                        if ($(this).valid()) {
                            return true;
                        }
                        return false;
                    });
                    var max = @Model.IdentityCardLimitQty, min = 1;
                    $('.weui-count__decrease').click(function(e) {
                        var $input = $(e.currentTarget).parent().find("input[id=BuyCount]");
                        var number = parseInt($input.val() || "0") - 1;
                        if (number < min) number = min;
                        $input.val(number);
                        var totalPrice = number * parseFloat("@Model.SaleRetailPrice");
                        $("label[id=TotalPrice]").text(totalPrice);
                    });
                    $('.weui-count__increase').click(function(e) {
                        var $input = $(e.currentTarget).parent().find('input[id=BuyCount]');
                        var number = parseInt($input.val() || "0") + 1;
                        if (number > max) number = max;
                        $input.val(number);
                        var totalPrice = number * parseFloat("@Model.SaleRetailPrice");
                        $("label[id=TotalPrice]").text(totalPrice);
                    });
                    dialog= $("#insuranceCardDialog").dialog({
                        title: "<div>@Model.ProductName<lable class='float-right red'>@Model.SaleRetailPrice.ToString("c")</lable></div>",
                        autoOpen: false,
                        width: "90%",
                        modal: true
                    });
                    $(".weui-dialog__close").click(function() {
                        dialog.dialog("close");
                    });
                });
                function showBuyInsuranceProductModel() {
                    dialog.dialog("open");
                }
            </script>
        </div>
    }
    <div class="weui-dialog__btn weui-dialog__close" style=""></div>
</div>
<script src="~/Scripts/qrcode.js"></script>
<script type="text/javascript">
    var qrcode;
    var _url = '@(HttpUtility.HtmlDecode(shareUrl))'.replace(/&amp;/g, "&") + "&t=" + new Date().getTime();
    $(function () {
        var qrcodeDiv = $("#qrcode").html();
        if (qrcodeDiv == undefined) return;
        qrcode = new QRCode('qrcode', {
            text: _url,
            width: 256,
            height: 256,
            colorDark: '#000000',
            colorLight: '#ffffff',
            correctLevel: QRCode.CorrectLevel.H
        });
    });
    function createQrCode() {
        qrcode.clear();
        qrcode.makeCode('@(HttpUtility.HtmlDecode(shareUrl))'.replace(/&amp;/g, "&") + "&t=" + new Date().getTime());
    }
</script>
<script src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
<script src="~/Scripts/WeiXinJsApi.js?v=2"></script>
